<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">品牌系列</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="castNameS">{{seriesDetails.seriesName}}</text></view>
		<view class="goods-image">
			<view v-if="isImage(seriesDetails.coverImg)">
				<image class="img" :src="pathImg+seriesDetails.coverImg" mode="widthFix">
				</image>
			</view>
			<view v-else>
				<video class="videoBox" :enable-progress-gesture="false" :src="pathImg+seriesDetails.coverImg" muted
					:autoplay="true" :controls="false" loop></video>
			</view>
		</view>
		
		<view class="goods-desc">
			<view class="title">
				<text>相关产品</text>
			</view>
			<view class="goodsList" v-if="seriesDetails.castingList.length > 0">
				<view class="listConten" v-for="(item, index) in seriesDetails.castingList" :key="index"
				@tap="navGo(item,index)">
					<view class="main">
						<view class="show_img">
							<text :class="['title',item.status==3?'title1':'title2']">{{setTitle(item)}}</text>
							<text class="version ">{{"版号："+item.metafile.publishNo || ""}}</text>
							
							<view v-if="isImage(item.fileUrl) == 'mp4'">
								<image class="img" :src="pathImg+item.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="widthFix"></image>
							</view>
							<view v-else>
								<image class="img" :src="pathImg+item.fileUrl" mode="widthFix"></image>
							</view>
						</view>
						<view class="goods_desc">
							<view class="desc">
								<view class="desc_title">
									{{item.dcName || ''}}
								</view>
								<image v-if="setImgShow(item) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
							</view>
							
							<view class="goods_limit">
								<view class="owner">
									<image class="imgHead" :src="item.issuerHeads" mode="scaleToFill"></image>
									<view class="owner-name">{{item.issuerNames}}</view>
								</view>
							</view>
							<view class="owner-price" :style="{'justify-content':seriesDetails.bsType != 1?'space-between':'center'}">
								<view class="priceBox" v-show="seriesDetails.bsType != 1">￥<text>{{item.price || 0}}</text></view>
								<text>{{seriesDetails.bsType | setButnTxt}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getnftapplyDetails,getfindBySeriesList,getnftapplylist} from "@/api/home.js";
	import {
		getUser
	} from "@/api/login.js";
	export default {
		data() {
			return {
				seriesDetails: {
					castingList:[],
					applyTag:[],
					issuerHeadList:[],
					issuerNameList:[],
				},
			};
		},
		onLoad(option) {
			if(option.type == 1){
				this.getList(option.id);
			}else{
				this.getDetails(option.id);
			}
		},
		methods: {
			setImgShow(cur){
				if(cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 0;
			},
			//status  1发售中2待售3结束
			setTitle(cur){
				let str = "抢购中";
				if(cur.status == 3){
					str = "首发售罄";
				}else if(cur.status == 4){
					str = "抽签中";
				}else if(cur.status == 1){
					if(cur.bsType == 0){//发售
						str = "发售中";
					}else if(cur.bsType == 1){//空投
						str = "发放中";
					}else if(cur.bsType == 9){//抢购
						str = "抢购中";
					}
				}else if(cur.status == 2){
					str = "预售中";
				}
				return str;
			},
			navGo(cur,index){
				// 类型：0：购买，1：空投，9抢购
				console.log(cur)
				if(cur.bsType != 9){
					uni.navigateTo({
						url:'/pages/detail/goodsInfo?id='+cur.id
					});
				}else{
					uni.navigateTo({
						url:'/pages/detail/index?id='+cur.id
					});
				}
			},
			getList(id){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getfindBySeriesList({"seriesId":id}).then(res =>{
					if(res.data.success){
						let obj = res.data.obj;
						
						if(obj.metafile){
							obj.metafile = JSON.parse(obj.metafile);
						}
						
						obj["coverImg"] = obj.coverFile;
						
						obj["applyInfo"] = obj.describeFile.split(',');
						if(obj.castingList){
							obj.castingList = obj.castingList.map((item) => {
								if (typeof item.metafile == "string") {
									item.metafile = JSON.parse(item.metafile);
								}
								if(item.issuerHead){
									item["issuerHeadList"] = item.issuerHead.split(',');
									item["issuerHeadList"] = item.issuerHeadList.map(itm => {
										itm = this.pathImg + itm;
										return itm;
									});
									item['issuerHeads'] = item["issuerHeadList"][0];
								};
								
								if(item.issuerName){
									item["issuerNameList"] = item.issuerName.split(',');
									item['issuerNames'] = item["issuerNameList"][0];
								};
								return item;
							});
						}else{
							obj.castingList = [];
						}
						
						this.seriesDetails = obj;
					}else{
						this.$u.toast('网络错误请稍后重试')
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			getDetails(id){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getnftapplyDetails({id}).then(res => {
					if (res.data.success) {
						let obj = res.data.obj;
						
						if(obj.metafile){
							obj.metafile = JSON.parse(obj.metafile);
						}
						if(obj.applyInfo){
							obj.applyInfo = (obj.applyInfo).split(',');
						}
						obj['seriesName'] = obj.applyName;
						
						obj["castingList"] = [];
						obj["bsType"] = 9;
						this.seriesDetails = obj;
						getnftapplylist({
							page:1,
							pageSize:10,
							activityStatus:"",//0未开始1进行中2已结束
							applyId:obj.id,
							isOpen:"",
							name:"",
						}).then(res => {
							if(res.data.success){
								let list = res.data.obj.list;
								this.seriesDetails["castingList"] = list.map((item) => {
									if (typeof item.metafile == "string") {
										item.metafile = JSON.parse(item.metafile);
									}
									item["fileUrl"] = item.coverImg;
									item["dcName"] = item.collName;
									item["bsType"] = 9;
									if(item.activityStatus == 1){//抢购
										item["status"] = 1;
									}else if(item.activityStatus == 2){//结束
										item["status"] = 3;
									}else if(item.activityStatus == 4){
										item["status"] = 3;
									}else{
										item["status"] = 2;
									}
									
									if(item.issuerHead){
										item["issuerHeadList"] = item.issuerHead.split(',');
										item["issuerHeadList"] = item.issuerHeadList.map(itm => {
											itm = this.pathImg + itm;
											return itm;
										});
										item['issuerHeads'] = item["issuerHeadList"][0];
									};
									
									if(item.issuerName){
										item["issuerNameList"] = item.issuerName.split(',');
										item['issuerNames'] = item["issuerNameList"][0];
									};
									return item;
								});
							}
						}).catch(err=>{
						
						});
					}else{
						
					}
				}).catch(err=>{
					
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断藏品是否是图片
			isImage(url) {
				if(url){
					let filePath = url.toLocaleLowerCase();
					if (filePath.indexOf(".mp4") != -1) {
						return false;
					} else {
						return true;
					}
				}else{
					return
				}
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			}
		},
		filters:{
			setButnTxt(data){
				let str = "";
				// 类型：0：购买，1：空投，9抢购
				if(data || data == 0){
					if(data == 1){
						str = "领取";
					}else{
						str = data==9?"抢购":"抢购";
					}
				}
				return str;
			}
		}
	};
</script>

<style lang="less" scoped>
	.con-box {
		width: 100%;
		padding: 0 30upx;
		padding-top: 120upx;
		padding-bottom: 20upx;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.castNameS{
			font-size: 36upx;
			line-height: 36upx;
			padding-top: 50upx;
			padding-bottom: 30upx;
			font-weight: 800;
			color: #333;
		}
		.goods-image {
			width: 100%;
			height: auto;
			max-height: 566upx;
			position: relative;
			border-radius: 20upx;
			overflow: hidden;
			>view{
				width: 100%;
				height: 100%;
				.img {
					width: 100%;
					height: 100%;
					display: block;
				}
				
				.videoBox {
					width: 100%;
					display: block;
					height: 566upx;
					/deep/.uni-video-container{
						background-color: transparent;
					}
				}
			}
		}
		.goods-desc {
			width: 100%;
			height: auto;
			>.title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-top:36upx;
				padding-bottom:10upx;
				text{
					font-size: 30upx;
					color:#2C1769;
					display:inline-block;
					text-align:center;
					position: relative;
					font-weight: 800;
				}
				text::after{
					content: "";
					display: block;
					position: absolute;
					bottom: -9upx;
					left: 50%;
					width: 32upx;
					height: 6upx;
					background: #CD301E;
					border-radius: 3upx;
					margin-left: -16upx;
				}
			}
			.goodsList{
				padding: 36upx 0;
				padding-bottom: 0;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex-wrap: wrap;
				.listConten{
					width: 50%;
					position: relative;
					overflow: hidden;
					padding-bottom: 40upx;
					.main {
						overflow: hidden;
						background-color: #fff;
						position: relative;
						border-radius: 25upx;
						padding-bottom: 20upx;
						.startBox{
							position: absolute;
							top: 20upx;
							left: 20upx;
							z-index: 2;
							display: flex;
							justify-content: center;
							align-items: center;
							padding:4upx 12upx;
							border-radius: 10upx;
							background-color: rgba(0,0,0,0.8);
							color: #17A814;
							font-size: 24upx;
							>text{
								display: inline-block;
								margin-right: 10upx;
								height: 100%;
								line-height: 24upx;
							}
							/deep/.u-count-down__text{
								color: #17A814;
								font-size: 24upx;
							}
						}
						.show_img {
							width: 100%;
							height:288upx;
							border-radius: 25upx;
							position: relative;
							overflow: hidden;
							.version{
								display: inline-block;
								text-align: center;
								position: absolute;
								left: 0;
								bottom: 30upx;
								width: 100%;
								color: #fff;
								font-size: 16upx;
								z-index: 2;
							}
							.title{
								display: inline-block;
								position: absolute;
								top: 0;
								left: 50%;
								margin-left: -91upx;
								text-align: center;
								font-size: 20upx;
								font-weight: bold;
								width: 182upx;
								height: 34upx;
								line-height: 34upx;
								z-index: 2;
								color: #fff;
								background-size: 100% 100%;
								background-repeat: no-repeat;
							}
							.title1{
								background-image: url(../../static/home/title1.png);
							}.title2{
								background-image: url(../../static/home/title2.png);
							}
							>view{
								width: 100%;
								height: 100%;
								position: relative;
								overflow: hidden;
								display: flex;
								align-items: center;
							}
							.img {
								width: 100%;
								display: block;
							}
							
							.audioBox {
								display: block;
								min-width: 100%;
								
								/deep/.uni-audio-default {
									display: block;
									min-width: 100%;
								}
							}
						}
							
						.goods_desc {
							width: 100%;
							padding: 0 20upx;
							padding-top: 20upx;
							position: relative;
							
							.desc {
								display: flex;
								align-items: center;
								justify-content: space-between;
								image{
									width: 26upx;
								}
								.desc_title {
									flex: 1%;
									padding-right: 16upx;
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #333;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									-o-text-overflow:ellipsis;
								}
							}
							.goods_limit{
								.owner {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									padding-top: 22upx;
									.imgHead {
										border-radius: 50%;
										width: 34upx;
										height: 34upx;
										box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
									}
										
									.owner-name {
										flex: 1%;
										display: inline-block;
										line-height: 24upx;
										margin-left: 10upx;
										font-size: 24upx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #666;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										-o-text-overflow:ellipsis;
									}
								}
							}
							.owner-price {
								width: 100%;
								display: flex;
								margin-top: 30upx;
								align-items: center;
								height: 62upx;
								justify-content: space-between;
								>text{
									display: inline-block;
									color: #fff;
									font-size: 20upx;
									height: 36upx;
									line-height: 36upx;
									width: 102upx;
									background: #EB5703;
									border-radius: 18upx;
									text-align: center;
									
								}
								.priceBox{
									font-size: 28upx;
									color:#2C1769;
									text{
										padding-left: 6upx;
										font-size: 46upx;
									}
								}
							}
						}
					}
					
				}
				
				.listConten:nth-child(odd){
					padding-right: 15upx;
				}
				.listConten:nth-child(even){
					padding-left: 15upx;
				}
			}
		}
	}
</style>
